page {
  min-height: 100%;
  background-color: #f4f4f4;
}

.container {
  padding-top: 90rpx;
}

.search-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 20;
  height: 90rpx;
  display: flex;
  align-items: center;
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  padding: 0 30rpx;
  font-size: 29rpx;
  .input-box {
    position: relative;
    flex: 1;
    height: 60rpx;
    background: #f4f4f4;
    color: #333;
    .keywrod {
      height: 100%;
      width: 90%;
      position: absolute;
      top: 0;
      left: 60rpx;
    }
    .icon-sousuo {
      position: absolute;
      top: -3rpx;
      left: 16rpx;
      font-size: 38rpx;
      color: #666;
    }
    .del {
      position: absolute;
      top: -2rpx;
      right: 16rpx;
      font-size: 38rpx;
      z-index: 20;
      color: #666;
    }
  }
  .right {
    width: 60rpx;
    margin-left: 20rpx;
  }
}

.no-search {
  .search-keywrod {
    background: #fff;
    margin-bottom: 20rpx;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 90rpx;
      padding: 0 30rpx;
      color: #999;
      font-size: 29rpx;
      .iconfont {
        font-size: 38rpx;
        color: #000;
      }
    }
    .content {
      padding-left: 30rpx;
      .item {
        display: inline-block;
        height: 48rpx;
        line-height: 48rpx;
        max-width: 200rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0 15rpx;
        border: 1px solid #999;
        margin: 0 30rpx 30rpx 0;
        font-size: 24rpx;
        color: #222;
      }
      .active {
        color: #b4282d;
        border: 1px solid #b4282d;
      }
    }
  }
}

.search-list {
  background: #fff;
  padding: 0 30rpx;
  .item {
    height: 90rpx;
    line-height: 90rpx;
    font-size: 28rpx;
    color: #222;
    border-bottom: 1px solid #f4f4f4;
  }
}

.sort {
  position: fixed;
  top: 90rpx;
  background: #fff;
  width: 100%;
  height: 80rpx;
  .sort-box {
    height: 100%;
    display: flex;
    background: #fff;
    border-bottom: 1px solid #d9d9d9;
    .item {
      flex: 1;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #333;
      font-size: 30rpx;
      .txt {
        color: #333;
        margin-right: 6rpx;
      }
    }
    .active {
      .txt {
        color: #b4282d;
      }
    }
    .by-price {
      background: url(//yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/no-3127092a69.png) 155rpx center no-repeat;
      background-size: 15rpx 21rpx;
    }
    .active.asc {
      background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/up-636b92c0a5.png) 155rpx center no-repeat;
      background-size: 15rpx 21rpx;
    }
    .active.desc {
      background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/down-95e035f3e5.png) 155rpx center no-repeat;
      background-size: 15rpx 21rpx;
    }
  }
}

.goods-wrap {
  margin-top: 175rpx;
  display: flex;
  flex-wrap: wrap;
  .item {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 8rpx;
    background: #fff;
    &:nth-child(odd) {
      border-right: 4rpx solid #f4f4f4;
    }
    &:nth-child(even) {
      border-left: 4rpx solid #f4f4f4;
    }
    image {
      width: 300rpx;
      margin: 0 auto;
    }
    .name {
      width: 100%;
      padding: 0 20rpx;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 30rpx;
      color: #333;
    }
    .row {
      margin: 20rpx 0;
      .price {
        font-size: 30rpx;
        color: #b4282d;
      }
      .sale {
        margin-left: 10rpx;
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}

.search-result-empty {
  width: 100%;
  height: 100%;
  padding-top: 300rpx;
  .icon {
    margin: 0 auto;
    display: block;
    width: 240rpx;
    height: 240rpx;
  }
  .text {
    display: block;
    width: 100%;
    height: 40rpx;
    font-size: 28rpx;
    text-align: center;
    color: #999;
  }
}
